<template>
  <div class="dashboard">
    <el-row>
      <el-col :xs="24" :sm="12" :lg="6">
        <Cards title="总销售额" value="¥ 126560">
          <template>
            <span class="monitor-sales">
              周同比 56.67%
              <i class="el-icon-caret-top icon-red"></i>日同比19.16%
              <i class="el-icon-caret-bottom icon-green"></i>
            </span>
          </template>
          <template #footer> 日销售额¥ 12423</template>
        </Cards>
      </el-col>

      <el-col :xs="24" :sm="12" :lg="6">
        <Cards title="访问量" value="88460">
          <template>
            <LineChart />
          </template>
          <template #footer> 日访问量 1234</template>
        </Cards>
      </el-col>

      <el-col :xs="24" :sm="12" :lg="6">
        <Cards title="支付笔数" value="182425">
          <template> <BarChart /></template>
          <template #footer> 转化率 60.2%</template>
        </Cards>
      </el-col>

      <el-col :xs="24" :sm="12" :lg="6">
        <Cards title="运营活动效果" value="78%">
          <template>
            <ProgessChart />
          </template>
          <template #footer>
            <span>
              周同比 12%
              <i class="el-icon-caret-top icon-red"></i>日同比 11%
              <i class="el-icon-caret-bottom icon-green"></i> </span
          ></template>
        </Cards>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import Cards from './components/Cards'
import LineChart from './components/LineChart.vue'
import BarChart from './components/BarChart.vue'
import ProgessChart from './components/ProgessChart.vue'

export default {
  name: 'Monitor',
  components: {
    Cards,
    LineChart,
    BarChart,
    ProgessChart
  }
}
</script>

<style lang="scss" scoped>
.dashboard {
  padding: 10px;
}
.monitor-sales {
  display: flex;
  align-items: center;
  font-size: 14px;
}
.icon-red {
  color: red;
}
.icon-green {
  color: rgb(18, 245, 18);
}
.monitor-sales {
  display: flex;
  align-items: center;
  font-size: 14px;
}
.monitor-col {
  margin-right: 10px;
  &.lastchild {
    margin-right: 0;
  }
}
</style>
